<template>
    <div class="main-window">
        <nav-widget/>
        <div class="main-window-page">
            <TitleBars v-if="!isCustomTitle"></TitleBars>
            <div :class="isCustomTitle ? 'main-window-content' : 'main-window-content-title'">
                <water-mask text="xx科技" subtext="阿木大叔2408">
                    <router-view />
                </water-mask>
            </div>
        </div>
    </div>
</template>

<script>
import {
    reactive,
    toRefs,
    computed
} from "vue";
import NavWidget from './nav.vue';
import TitleBars from '@/components/TitleBars.vue'
import WaterMask from '@/components/WaterMask.vue'
import {useRouter} from 'vue-router';

export default {
    name: "MainWindow",
    components: {
        NavWidget,
        TitleBars,
        WaterMask
    },

    setup() {
        const state = reactive({
        });
        const router = useRouter();

        const isCustomTitle = computed(()=> {
            return router.currentRoute.value.meta.customTitle;
        });

        return {
            ...toRefs(state),
            isCustomTitle
        };
    },
};
</script>

<style lang="scss" scoped>
.main-window {
    width: 100vw;
    height: 100vh;
    background: #f0f0f1;
    display: flex;

    .main-window-page {
        width: calc(100% - 2px) ;
        height: calc(100% - 2px) ;
        border: 1px solid #dbdbdd;
        .main-window-content {
            width: 100%;
            height: 100%;
        }

        .main-window-content-title {
            width: 100%;
            height: calc(100% - 28px) ;
        }
    }
}
</style>

